import {Button, Divider, Grid, Snackbar} from "@material-ui/core";
import * as React from 'react';
import {Component} from 'react';
import {DoctorInfo} from "../../components/Components";
import {passDoctor} from "../../store/actions";
import {AppPageProps} from "../../types/AppPageProps";
import {appointmentConfirm} from "../../utils/RequestUtils"
import CardHeader from "../mymedicalcard/CardHeader";

interface Patient {
    id: string,
    name: string,
    date: string,
    source: string,
    period: string,
    price: string,
    place: string,
    note: string
}

interface Props extends AppPageProps {
    data: any,
    patient: Patient,
    state: any
}

class ConfirmAppointment extends Component<Props> {

    public submit = () => {
        const {patient, data} = this.props;
        appointmentConfirm({
            doctorId: data.doctor.id,
            patientId: patient.id,
            sourceId: data.source.id
        }).then((res) => {
            this.props.history.push({
                pathname: "/appointment/success",
            });
        });

    };

    public cancel = () => {
        this.props.history.push({
            pathname: "/"
        })
    };

    public choosePatient = () => {
        this.props.history.push({
            pathname: "/patient/list",
            state: {}
        });
    };

    public componentWillMount() {
        console.log("ConfirmAppointment.tsx:61->this.props", this.props);
        const data = this.props.history.location.state;
        if (data) {
            this.props.dispatch(passDoctor(data));
        }
    }

    public render() {
        const {data, patient} = this.props;
        if (!data) {
            return null;
        }
        const {id, name, note = "注意"} = patient;
        const {date, id: source, time, price = 13, place = "未知地点"} = data.source;
        return (
            <div>
                <CardHeader
                    title={"确认预约"}
                    diplayButton={false}
                />
                <div style={{margin: "20px"}}>
                    <DoctorInfo data={data.doctor}/>
                    <Divider style={{margin: "8px"}}/>
                    <h3>预约信息</h3>
                    {
                        !patient ? null : <div>
                            <div>
                                <Grid container={true} direction={"row"}>
                                    <Grid item={true} xs={6}>患者姓名:{name}</Grid>
                                    <Grid item={true} xs={6} onClick={this.choosePatient}>
                                        <span className={"button-tag"}>更换预约人</span>
                                    </Grid>
                                </Grid>
                            </div>
                            <p>id:{id}</p>
                            <p>就诊日期:{date}</p>
                            <p>就诊时段:{time}</p>
                            <p>就诊排号:{source}号</p>
                            <p>挂号金额:{price}元</p>
                            <p>就诊地点:{place}</p>
                            <p>注意事项:{note}</p>
                        </div>
                    }

                    <Snackbar open={true} style={{padding: "24px", textAlign: "center"}}>
                        <div style={{width: "100%"}}>
                            <Grid container={true}>
                                <Grid item={true} xs={6}>
                                    <Button variant="contained" color="primary" className={""} onClick={this.cancel}>
                                        不预约了
                                    </Button>
                                </Grid>
                                <Grid item={true} xs={6}>
                                    <Button variant="contained" color="primary" className={""} onClick={this.submit}>
                                        立即预约
                                    </Button>
                                </Grid>
                            </Grid>
                        </div>
                    </Snackbar>
                </div>
            </div>
        );
    }
}

export default ConfirmAppointment;